<template>
    <div class="mail-mailsendconfig-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <el-card shadow="hover">
                <div class="bar_btn_div">
                    <div class="title_div">
                        <div class="el-icon-tickets"></div>
                        <div>筛选</div>
                    </div>
                    <div>
                        <el-button size="default" @click.native.prevent="handleResetSearch()">重置搜索</el-button>
                        <el-button type="primary" size="default" @click.native.prevent="refresh()">查询搜索
                        </el-button>
                        <!-- <el-button type="primary" size="small" :loading="isOnLoading" @click.native.prevent="export2Excel()">
                    导出Excel</el-button> -->
                    </div>
                </div>

                <div class="search_div">
                    <el-form :model="state.ruleForm" label-width="120px">
                        <div style="display: flex; flex-wrap: wrap">
                            <el-form-item label="发送者ID">
                                <el-input clearable v-model="state.ruleForm.emailSenderId" class="input-width"
                                    placeholder="发送者ID"></el-input>
                            </el-form-item>

                            <el-form-item label="邮箱用户名">
                                <el-input clearable v-model="state.ruleForm.userName" class="input-width"
                                    placeholder="邮箱用户名"></el-input>
                            </el-form-item>

                            <el-form-item label="状态">
                                <el-select v-model="state.ruleForm.status" placeholder="请选择" clearable allow-create
                                    filterable>
                                    <el-option label="启用" :value="1"></el-option>
                                    <el-option label="禁用" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </el-card>




            <el-card style="margin-top: 20px;" shadow="hover" class="layout-padding-auto">

                <div class="bar_tools">
                    <el-button-group class="ml-4">
                        <el-button size="small" type="primary" @click="handlerAdd()">新增配置</el-button>
                    </el-button-group>
                </div>
                <el-table size="default" :data="state.dataList" style="border: 1px solid #ebeef5; margin-top: 20px">
                    <el-table-column align="center" label="发送者ID">
                        <template #default="scope">
                            <span>{{ scope.row.emailSenderId }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="邮箱用户名">
                        <template #default="scope">
                            <span>{{ scope.row.userName }}</span>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column align="center" label="邮箱密码">
                        <template #default="scope">
                            <el-input type="password" v-model="scope.row.password" disabled></el-input>
                        </template>
                    </el-table-column> -->

                    <el-table-column align="center" label="邮件端口">
                        <template #default="scope">
                            <span>{{ scope.row.port }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="邮件发送服务器">
                        <template #default="scope">
                            <span>{{ scope.row.host }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="协议">
                        <template #default="scope">
                            <span>{{ scope.row.protocol }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="STARTTLS">
                        <template #default="scope">
                            <el-switch v-model="scope.row.starttlsEnabled" active-color="#13ce66" inactive-color="#ff4949"
                                :active-value="true" :inactive-value="false" disabled>
                            </el-switch>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="SSL">
                        <template #default="scope">
                            <el-switch v-model="scope.row.tlsEnabled" active-color="#13ce66" inactive-color="#ff4949"
                                :active-value="true" :inactive-value="false" disabled>
                            </el-switch>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="状态">
                        <template #default="scope">
                            <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"
                                :active-value="true" :inactive-value="false" disabled>
                            </el-switch>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column align="center" label="状态" width="160">
                    <template #default="scope">
                        <el-button size="small" type="success" v-if="scope.row.status == 10">
                            启用
                        </el-button>
                        <el-button size="small" type="info" v-if="scope.row.status == 99">
                            禁用
                        </el-button>
                    </template>
                </el-table-column> -->

                    <el-table-column align="center" label="创建时间" width="160">
                        <template #default="scope">
                            <span>{{ formatDate(new Date(scope.row.createdDate), "YYYY-mm-dd HH:MM:SS") }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="更新时间" width="160">
                        <template #default="scope">
                            <span>{{ formatDate(new Date(scope.row.createdDate), "YYYY-mm-dd HH:MM:SS") }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="操作" width="160px" fixed="right">
                        <template #default="scope">
                            <div>
                                <el-button @click="handlerEdit(scope.$index, scope.row)" type="primary" size="small">编辑</el-button>
                                <el-button @click="handlerSend(scope.$index, scope.row)" type="primary" size="small">测试</el-button>
                            </div>
                        </template>
                    </el-table-column>

                </el-table>



                <div class="pagination_div">
                    <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                        :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.ruleForm.page" background
                        v-model:page-size="state.ruleForm.limit" layout="total, sizes, prev, pager, next, jumper"
                        :total="state.ruleForm.total">
                    </el-pagination>
                </div>


            </el-card>


        </el-card>

        <editdialog ref="editdialogRef" @refresh="refresh" />
        <senddialog ref="senddialogRef" @refresh="refresh" />
    </div>
</template>


<script setup lang="ts" name="mailsendconfig">

import { formatDate } from '../../../utils/formatTime';
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// 导入接口
import { useMailApi } from "../../../api/mail";



// 引入组件
const editdialog = defineAsyncComponent(() => import('./editdialog.vue'))
const editdialogRef = ref();
const senddialog = defineAsyncComponent(() => import('./senddialog.vue'))
const senddialogRef = ref();


const state = reactive({
    dataList: [] as any,
    ruleForm: {
        page: 1,
        limit: 10,
        total: 0,
        userName: "",
        emailSenderId: "",
        status: [],

    },
    pickerOptions: {
        shortcuts: [
            {
                text: "最近一周",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 7
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近一个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 30
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近三个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 90
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
        ],
    },
    multipleSelection: [],// 选择的项


});
//新增按钮
const handlerAdd = () => {
    editdialogRef.value.openDialog("add");
}
//编辑按钮
const handlerEdit = (index: any, row: any) => {
    editdialogRef.value.openDialog("edit", row);
}
//测试按钮
const handlerSend = (index: any, row: any) => {
    senddialogRef.value.openDialog("send", row);
}

const handleResetSearch = () => {
    state.ruleForm = {
        page: 1,
        limit: 10,
        total: 0,
        userName: "",
        emailSenderId: "",
        status: [],
    };
    queryMailboxConfig();
}

const refresh = () => {
    queryMailboxConfig();
}


// 分页改变
const onHandleSizeChange = (val: number) => {
    state.ruleForm.limit = val;
    queryMailboxConfig();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.ruleForm.page = val;
    queryMailboxConfig();
};
const queryMailboxConfig = async () => {
    try {
        let vo = {
            limit:state.ruleForm.limit,
            page:state.ruleForm.page
        } as any;
        if (state.ruleForm.userName) vo["userName"] = state.ruleForm.userName;
        if (state.ruleForm.status) vo["status"] = state.ruleForm.status;
        if (state.ruleForm.emailSenderId) vo["emailSenderId"] = state.ruleForm.emailSenderId;
        let tempList = await useMailApi().queryMailboxConfig(vo);

        state.dataList =tempList.list;
    	state.ruleForm.total = tempList.total;

    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}

// 页面加载时
onMounted(async () => {

    await queryMailboxConfig();
});

</script>



<style lang="scss" scoped>
.el-form .el-form-item:last-of-type {
    margin-bottom: 22px !important;
}

.bar_tools {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}

.mail-mailsendconfig-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}

.bar_btn_div {
    display: flex;
    padding: 20px;
    border: 1px solid #ebeef5;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px 5px 0px 0px;

    .title_div {
        display: flex;
        font-size: 16px;

        &>div {
            margin-right: 10px;
        }
    }
}

.search_div {
    border: 1px solid #ebeef5;
    border-top: 0px;
    border-radius: 0px 0px 5px 5px;
    padding: 20px;
    padding-bottom: 0px;
}</style>
